<!--
 * @Descripttion: 
 * @version: 
 * @Author: by
 * @Date: 2021-10-21 16:27:37
 * @LastEditors: tc
 * @LastEditTime: 2022-04-07 14:44:52
-->
<template>
    <div class="middlebox">
        <div class="operation-box">
            <div class="operation-list" v-for="item,index in shebeiData" :key="index">
                <div class="card_left">
                    <div class="card_left_name">{{item.name}}</div>
                    <div class="card_left_detail">{{item.shuzi}} {{item.danwei}}</div>
                </div>
                <div class="card_right">
                        <el-image
                    :src="item.img"
                    fit="fit"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        data: {
            default: () => {}
        }
    },
    data() {
        return {
            shebeiData:[
                {
                    shuzi:'--',
                    danwei:'m',
                    name:'水位',
                    img:require('../../assets/img/dashboard/水位-实时信息.png')
                },
                {
                    shuzi:'--',
                    danwei:'m',
                    name:'比汛限',
                    img:require('../../assets/img/dashboard/比汛限-实时信息.png')
                },
                {
                    shuzi:'--',
                    danwei:'mm',
                    name:'1小时降水',
                    img:require('../../assets/img/dashboard/降水-实时信息.png')
                },
                {
                    shuzi:'--',
                    danwei:'hPa',
                    name:'渗压',
                    img:require('../../assets/img/dashboard/渗压-实时信息.png')
                },
            ],
        }
    },
    watch: {
        data: {
            handler(val) {
                this.renderData(val)
            },
            deep:true
        }
    },
    mounted() {
        // this.renderData(this.data)
    },
    unmounted() {

    },
    methods: {
       renderData(val){
           this.shebeiData[0].shuzi = val.z != null ? val.z:'--'
           this.shebeiData[1].shuzi = val.waterhead != null ? val.waterhead:'--'
           this.shebeiData[2].shuzi = val.r1h != null ? val.r1h:'--'
           this.shebeiData[3].shuzi = val.pressure != null ? val.pressure:'--'
       },
    }
}
</script>

<style lang="scss" scoped>
.middlebox {
    height: 100%;
    display: flex;
    align-items: center;
    // padding: 7% 20px;
    box-sizing: border-box;
    .operation-box {
        display: flex;
        width: 100%;
        justify-content: space-around;
        .operation-list {
            display: flex;
            width: 200px;
            position: relative;
            height: 100px;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(39, 189, 249, 0.1);
            box-shadow: -2px 0px 0px 0px #00FFFF;
            .card_left {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: flex-start;
                    padding-left: 15px;
                    height: 75%;
                    .card_left_name {
                        line-height: 18px;
                        color: #FFFFFF;
                        font-size: 16px;
                    }
                    .card_left_detail {
                        font-size: 28px;
                        font-weight: bold;
                        color: #FFBD38;
                    }
            }
            .card_right {
                padding-right: 10px;
            }
        }
    }
}
</style>